<template>
    <div>
        <!-- <el-form-item :label="$t('name')">
            <el-input v-model="writer.name" disabled />
        </el-form-item>-->
        <el-form-item :label="$t('jdbcUrl')" :prop="$t('jdbcUrl')">
            <el-input v-model="writer.parameter.connection[0].jdbcUrl" />
        </el-form-item>
        <el-form-item :label="$t('username')" :prop="$t('username')">
            <el-input v-model="writer.parameter.username" />
        </el-form-item>
        <el-form-item :label="$t('password')" :prop="$t('password')">
            <el-input v-model="writer.parameter.password" />
        </el-form-item>
        <el-form-item :label="$t('table')" :prop="$t('table')">
            <el-input v-model="writer.parameter.connection[0].table[0]" />
        </el-form-item>
        <el-form-item :label="$t('writeMode')">
            <el-select v-model="writer.parameter.writeMode" placeholder="Select">
                <el-option v-for="item in writeMode" :key="item" :label="item" :value="item"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item :label="$t('preSql')" :prop="$t('preSql')">
            <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="writer.parameter.preSql[0]" />
        </el-form-item>
        <!-- <el-form-item :label="$t('column')" :prop="$t('column')">
            <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="writer.parameter.column" />
        </el-form-item>-->
        <el-form-item :label="$t('column')" :prop="$t('column')">
            <div class="column-box" v-for="(column, i) in writer.parameter.column" :key="i">
                <el-input
                    :ref="el => { if (el) columns[i] = el }"
                    v-model="writer.parameter.column[i]"
                />
                <div class="remove-icon">
                    <el-button
                        type="danger"
                        circle
                        :icon="SemiSelect"
                        size="mini"
                        @click="removeWriterColumn(i)"
                    ></el-button>
                </div>
            </div>
            <el-button
                type="primary"
                plain
                style="width:100%;border-style: dashed; "
                :icon="Plus"
                @click="addWriterColumn"
            ></el-button>
        </el-form-item>
    </div>
</template>

<script setup>
import { Plus, SemiSelect } from '@element-plus/icons-vue'
import { ref, watch, onBeforeUpdate, nextTick } from "vue";
import { useStore } from 'vuex'

const store = useStore()

const writeMode = ref(['insert', 'replace', 'update'])
const writer = ref({
    "name": "mysqlwriter",
    "parameter": {
        "writeMode": "update",
        "username": "",
        "password": "",
        "column": [],
        "preSql": [],
        "connection": [
            {
                "jdbcUrl": "",
                "table": []
            }
        ]
    }
})

store.commit('setWriter', writer.value)

watch(
    writer,
    (state, prevState) => {
        store.commit('setWriter', state)
    },
    { deep: true }
)

const columns = ref([])
// 确保在每次更新之前重置ref
onBeforeUpdate(() => {
    columns.value = []
})

const addWriterColumn = () => {
    writer.value.parameter.column.push('')
    focusInput()
}

const removeWriterColumn = (index) => {
    writer.value.parameter.column.splice(index, 1)
    columns.value.pop()
    focusInput()
}

const focusInput = async () => {
    await nextTick()
    if (columns.value.length > 0) {
        columns.value[columns.value.length - 1].focus()
    }
}
</script>

<style scoped>
.column-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}
.remove-icon {
    width: 50px;
    display: flex;
    justify-content: center;
}
</style>